<template>
	<view class="profile-container">
		<!-- 导航栏 -->
		<nav-bar></nav-bar>
		<!-- 实名认证 -->
		<view class="info-item" @tap="goToVerification">
			<text class="item-label">实名认证</text>
			<view class="item-right">
				<text class="item-value">{{ realName || '未认证' }}</text>
				<text class="verified-tag" v-if="isVerified">已认证</text>
				<text class="iconfont icon-right"></text>
			</view>
		</view>

		<!-- 头像管理 -->
		<view class="avatar-section">
			<!-- 工装头像 -->
			<view class="avatar-item" @tap="uploadAvatar('work')">
				<image :src="workAvatar || '/static/default-work-avatar.png'" class="avatar-image"></image>
				<text class="avatar-title">工装头像</text>
				<view class="upload-btn">立即上传</view>
			</view>
			<!-- 个人相册 -->
			<!-- <view class="avatar-item" @tap="uploadAvatar('personal')">
        <image :src="personalAvatar || '/static/default-personal-avatar.png'" class="avatar-image"></image>
        <text class="avatar-title">个人相册</text>
        <view class="upload-btn">立即上传</view>
      </view> -->
		</view>

		<!-- 资质照片 -->
		<view class="info-item" @tap="goToQualification">
			<text class="item-label">资质照片</text>
			<view class="item-right">
				<view class="qualification-tags">
					<text class="tag" :class="{ verified: idCardVerified }">身份证</text>
					<text class="tag" :class="{ verified: qualificationVerified }">从业资质</text>
					<text class="tag" :class="{ verified: healthVerified }">健康证</text>
				</view>
				<text class="iconfont icon-right"></text>
			</view>
		</view>

		<!-- 职业技能 -->
		<view class="info-item" @tap="goToSkills">
			<text class="item-label">职业技能</text>
			<view class="item-right">
				<view class="setup-btn">点击设置</view>
				<text class="iconfont icon-right"></text>
			</view>
		</view>

		<!-- 个人简介 -->
		<view class="info-item" @tap="goToIntroduction">
			<text class="item-label">个人简介</text>
			<view class="item-right">
				<view class="setup-btn">点击设置</view>
				<text class="iconfont icon-right"></text>
			</view>
		</view>

		<!-- 服务项目 -->
		<view class="info-item" @tap="goToServices">
			<text class="item-label">服务项目</text>
			<view class="item-right">
				<view class="setup-btn">点击设置</view>
				<text class="iconfont icon-right"></text>
			</view>
		</view>

		<!-- 接单时段 -->
		<view class="info-item" @tap="goToTimeline">
			<text class="item-label">接单时段</text>
			<view class="item-right">
				<text
					class="item-value">{{ workSchedule ? `${workSchedule.startTime}-${workSchedule.endTime} (${workSchedule.workDays ? workSchedule.workDays.split(',').filter(Boolean).length : 0}天/周)` : '未设置' }}</text>
				<text class="iconfont icon-right"></text>
			</view>
		</view>

		<!-- 接单位置 -->
		<view class="info-item" @tap="goToLocation">
			<text class="item-label">接单位置</text>
			<view class="item-right">
				<view class="setup-btn">点击设置</view>
				<text class="iconfont icon-right"></text>
			</view>
		</view>

		<!-- 接单手机 -->
		<view class="info-item" @tap="showPhonePopup">
			<text class="item-label">接单手机</text>
			<view class="item-right">
				<text class="item-value">{{ phone || '未设置' }}</text>
				<text class="iconfont icon-right"></text>
			</view>
		</view>

		<!-- 手机号码修改弹窗 -->
		<view class="phone-popup" v-if="phonePopupVisible">
			<view class="popup-mask" @tap="hidePhonePopup"></view>
			<view class="popup-content" @tap.stop>
				<view class="popup-header">
					<text class="popup-title">修改接单手机</text>
					<text class="popup-close" @tap="hidePhonePopup">×</text>
				</view>

				<view class="popup-body">
					<view class="input-group">
						<text class="input-label">手机号码</text>
						<view class="uni-input-wrapper">
							<input class="uni-input phone-input" type="number"
								:placeholder="phone ? '当前: ' + phone : '请输入手机号码'" maxlength="11" v-model="newPhone"
								confirm-type="done" />
						</view>
					</view>

					<button class="submit-btn" @tap.stop="updatePhone">确认修改</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import TechNavBar from '@/components/tech-nav-bar.vue'
	import NavBar from '@/components/nav-bar/nav-bar.vue'
	export default {
		components: {
			TechNavBar,
			NavBar
		},

		data() {
			return {
				idNumber: null,
				technician: null,
				isVerified: false,
				realName: '',
				workAvatar: '',
				personalAvatar: '',
				realPhotoPreview: '',
				photoCount: 0,
				idCardVerified: false,
				qualificationVerified: false,
				healthVerified: false,
				skillName: '美容理疗师',
				hasIntroduction: false,
				phone: '',
				workSchedule: null,
				techId: '',
				phonePopupVisible: false,
				newPhone: '',
			}
		},

		onLoad() {
			const userInfo = uni.getStorageSync('userInfo')
			if (userInfo && userInfo.techId) {
				this.techId = userInfo.techId
			}
			this.loadTechnicianInfo()
			this.loadWorkSchedule()
		},

		onShow() {
			if (this.techId) {
				this.loadTechnicianInfo();
				this.loadWorkSchedule();
			}
		},

		methods: {
			// 加载技师信息
			async loadTechnicianInfo() {
				if (!this.techId) {
					console.error('未找到技师ID')
					return
				}

				uni.showLoading({
					title: '加载中...'
				})

				try {
					const result = await uni.request({
						url: `${uni.$config.baseUrl}/technician/technician/${this.techId}`,
						method: 'GET'
					})
					if (result.data.code === 200 && result.data.data) {
						// 保存完整的技师信息对象
						this.technician = result.data.data

						// 更新UI显示所需的数据
						const data = result.data.data
						this.phone = data.phone || '未设置'
						this.workAvatar = data.avatar || '' // 绑定工装头像
						this.personalAvatar = data.avatar || '' // 绑定个人头像
						this.realPhotoPreview = data.avatar || '' // 绑定实拍照片预览图
						this.photoCount = data.photoCount || 0 // 绑定照片数量
						this.realName = data.name || '' // 绑定真实姓名
						this.isVerified = data.name != null // 绑定认证状态

						// 绑定资质认证状态
						this.idCardVerified = !!data.idCardVerified
						this.qualificationVerified = !!data.qualificationVerified
						this.healthVerified = !!data.healthVerified
					} else {
						throw new Error(result.data.msg || '获取技师信息失败')
					}
				} catch (err) {
					console.error('获取技师信息失败:', err)
					uni.showToast({
						title: '获取技师信息失败',
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}
			},

			// 加载工作时间设置
			async loadWorkSchedule() {
				try {
					const result = await uni.request({
						url: `${uni.$config.baseUrl}/schedule/schedule/listAll`,
						method: 'GET',
						data: {
							technicianId: this.techId
						}
					})

					if (result.data.code === 200 && result.data.rows && result.data.rows.length > 0) {
						this.workSchedule = result.data.rows[0]
					}
				} catch (err) {
					console.error('获取工作时间设置失败:', err)
				}
			},

			// 上传头像
			uploadAvatar(type) {
				if (type === 'work') {
					uni.navigateTo({
						url: '/pages/technician/workavatar'
					})
				} else if (type === 'personal') {
					uni.navigateTo({
						url: '/pages/technician/personalavatar'
					})
				}
			},
			goToTimeline() {
				uni.navigateTo({
					url: '/pages/technician/timeline'
				})
			},
			// 页面跳转方法
			goToVerification() {
				uni.navigateTo({
					url: '/pages/technician/verification'
				})
			},

			goToPhotoAlbum() {
				uni.navigateTo({
					url: '/pages/technician/photo-album'
				})
			},

			goToQualification() {
				uni.navigateTo({
					url: '/pages/technician/qualification'
				})
			},

			goToSkills() {
				uni.navigateTo({
					url: '/pages/technician/skills'
				})
			},

			goToIntroduction() {
				uni.navigateTo({
					url: '/pages/technician/introduction'
				})
			},

			goToServices() {
				uni.navigateTo({
					url: '/pages/technician/services'
				})
			},

			goToLocation() {
				uni.navigateTo({
					url: '/pages/technician/location'
				})
			},

			showPhonePopup() {
				this.phonePopupVisible = true
				// 预先填充当前手机号，如果有效
				if (this.phone && /^1[3-9]\d{9}$/.test(this.phone)) {
					this.newPhone = this.phone
				} else {
					this.newPhone = ''
				}
			},

			hidePhonePopup() {
				this.phonePopupVisible = false
				// 重置输入内容
				this.newPhone = ''
			},

			async updatePhone() {
				// 验证手机号格式
				if (!this.newPhone || !/^1[3-9]\d{9}$/.test(this.newPhone)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
					return
				}

				try {
					uni.showLoading({
						title: '提交中...'
					})

					// 准备更新的技师数据
					const technicianData = {
						...this.technician, // 保留原有技师信息
						id: this.techId,
						phone: this.newPhone // 更新手机号
					}

					// 调用更新技师信息接口
					const res = await uni.request({
						url: `${uni.$config.baseUrl}/technician/technician`,
						method: 'PUT',
						data: technicianData,
						header: {
							'Content-Type': 'application/json'
						}
					})

					if (res.data.code === 200) {
						// 更新成功
						uni.showToast({
							title: '手机号更新成功',
							icon: 'success'
						})

						// 更新本地显示的手机号
						this.phone = this.newPhone
						this.technician.phone = this.newPhone

						// 关闭弹窗并重置表单
						this.hidePhonePopup()
					} else {
						throw new Error(res.data.msg || '更新手机号失败')
					}
				} catch (error) {
					console.error('更新手机号失败:', error)
					uni.showToast({
						title: error.message || '更新手机号失败，请稍后再试',
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.profile-container {
		min-height: 100vh;
		background: #F5F5F5;

		.info-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			background: #FFFFFF;
			margin-bottom: 2rpx;

			.item-label {
				font-size: 32rpx;
				color: #333333;
			}

			.item-right {
				display: flex;
				align-items: center;

				.item-value {
					font-size: 28rpx;
					color: #666666;
					margin-right: 10rpx;
				}

				.verified-tag {
					font-size: 24rpx;
					color: #2B85E4;
					margin-right: 10rpx;
				}

				.icon-right {
					font-size: 28rpx;
					color: #CCCCCC;
				}

				.qualification-tags {
					display: flex;
					margin-right: 10rpx;

					.tag {
						font-size: 24rpx;
						color: #999999;
						margin-right: 20rpx;

						&.verified {
							color: #2B85E4;

							&::after {
								content: '✓';
								margin-left: 4rpx;
							}
						}
					}
				}

				.intro-status {
					font-size: 28rpx;
					color: #999999;
					margin-right: 10rpx;

					&.incomplete {
						color: #FF6B6B;
					}
				}

				.setup-btn {
					font-size: 28rpx;
					color: #999999;
					margin-right: 10rpx;
					padding: 4rpx 20rpx;
					background: #F5F5F5;
					border-radius: 24rpx;
					border: 2rpx solid #E5E5E5;
				}

				.rank-tag {
					font-size: 24rpx;
					color: #FF4B4B;
					border: 2rpx solid #FF4B4B;
					padding: 4rpx 12rpx;
					border-radius: 4rpx;
					margin-right: 10rpx;
				}
			}
		}

		.avatar-section {
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			background: #FFFFFF;
			margin-bottom: 20rpx;

			.avatar-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;

				.avatar-image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 60rpx;
					margin-bottom: 16rpx;
				}

				.avatar-title {
					font-size: 28rpx;
					color: #333333;
					margin-bottom: 8rpx;
				}

				.upload-btn {
					font-size: 24rpx;
					color: #FF4B4B;
					padding: 4rpx 16rpx;
					border: 2rpx solid #FF4B4B;
					border-radius: 24rpx;
				}

				.photo-count {
					font-size: 24rpx;
					color: #999999;
				}
			}
		}

		.phone-popup {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
			display: flex;
			justify-content: center;
			align-items: flex-end;
			z-index: 999;

			.popup-mask {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			.popup-content {
				background: #FFFFFF;
				padding: 30rpx;
				border-radius: 20rpx 20rpx 0 0;
				width: 100%;
				animation: slideUp 0.3s ease;
				position: relative;
				z-index: 1000;

				.popup-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 30rpx;

					.popup-title {
						font-size: 32rpx;
						font-weight: 500;
						color: #333333;
					}

					.popup-close {
						font-size: 40rpx;
						color: #999999;
						padding: 10rpx;
					}
				}

				.popup-body {
					.input-group {
						margin-bottom: 30rpx;

						.input-label {
							font-size: 28rpx;
							color: #333333;
							margin-bottom: 15rpx;
							display: block;
						}

						.uni-input-wrapper {
							position: relative;
							width: 100%;

							.uni-input {
								width: 100%;
								height: 80rpx;
								padding: 0 20rpx;
								border: 2rpx solid #EEEEEE;
								border-radius: 8rpx;
								background: #F8F8F8;
								font-size: 28rpx;
								box-sizing: border-box;
							}
						}

						.input-field {
							width: 100%;
							height: 80rpx;
							padding: 0 20rpx;
							border: 2rpx solid #EEEEEE;
							border-radius: 8rpx;
							background: #F8F8F8;
							font-size: 28rpx;
							box-sizing: border-box;
						}
					}

					.submit-btn {
						width: 100%;
						height: 90rpx;
						line-height: 90rpx;
						background: #FF4B4B;
						color: #FFFFFF;
						border: none;
						border-radius: 45rpx;
						margin-top: 40rpx;
						font-size: 32rpx;
						font-weight: 500;
						z-index: 1001;
					}
				}
			}
		}

		@keyframes slideUp {
			from {
				transform: translateY(100%);
			}

			to {
				transform: translateY(0);
			}
		}
	}
</style>